<script lang="ts" setup>
import { useSystemStore } from '@/stores/system'
import type { DialogType } from '@/type'

const systemStore = useSystemStore()

const { attribute, title } = defineProps({
  attribute: {
    type: String as unknown as PropType<DialogType>,
    required: true
  },
  title: {
    type: String,
    default: ''
  }
})
</script>

<template>
  <el-dialog
    v-model="systemStore.dialog[attribute]"
    :show-close="false"
    class="overflow-hidden p-0 !min-w-72 w-full max-w-[1000px]"
    @close="systemStore.dialog[attribute] = false"
  >
    <el-container class="use-font-theme p-5 gap-5" direction="vertical">
      <span v-if="title != ''" class="mx-auto">{{ title }}</span>
      <slot name="default" />
    </el-container>
  </el-dialog>
</template>

<style lang="scss"></style>
